<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>角色管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输角色名称" clearable v-model="name" @clear="searchRole">
                        <el-button slot="append" icon="el-icon-search" @click="searchRole"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addDialogVisible=true">添加角色</el-button>
                </el-col>
            </el-row>
            <el-table :data="roleList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="角色名称" prop="name"></el-table-column>
                <el-table-column label="权限列表" >
                  <template slot-scope="scope">
                    <span v-for="p in scope.row.permissionNames" v-text="p+' '"></span>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button type="info" size="mini" @click="showAuthorityDialog(scope.row)">授权</el-button>
                        <el-button type="primary" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
                        <el-button type="danger" size="mini" @click="removeRoleById(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10 , 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>
        <!--添加角色-->
        <el-dialog title="添加角色" :visible.sync="addDialogVisible" width="50%" @close="addRoleFormClose">
            <el-form
                    :model="addRoleForm"
                    :rules="addRoleFormRules"
                    ref="addRoleFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >
                <el-form-item label="角色名称" prop="name">
                    <el-input v-model="addRoleForm.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addRole">确 定</el-button>
                <el-button @click="addDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
        <!--修改角色-->
        <el-dialog
                title="修改角色"
                :visible.sync="editDialogVisible"
                width="50%"
                @close="editRoleFormClose"
        >
            <el-form
                    :model="editRoleForm"
                    :rules="editRoleFormRules"
                    ref="editRoleFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >
                <el-form-item label="角色名称" prop="name">
                    <el-input v-model="editRoleForm.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editRole">确 定</el-button>
                <el-button @click="editDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
      <!--授权对话框-->
      <el-dialog
          title="菜单权限"
          :visible.sync="authorityDialogVisible"
          width="50%"
          :close-on-click-modal="false"
          @close="cancelAuthorityMenu"
      >
        <el-form
            :model="authorityForm"
            :rules="authorityFormRules"
            ref="authorityFormRef"
            label-width="100px"
            class="demo-ruleForm"
        >
          <el-form-item label="角色ID" prop="roleId">
            <el-input v-model="authorityForm.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="authorityForm.name" disabled></el-input>
          </el-form-item>
          <!--:checkStrictly="true"-->
          <el-form-item label="菜单权限" prop="roleMenu">
            <el-tree
                :data="menuList"
                show-checkbox
                default-expand-all
                node-key="id"
                ref="roleMenuTree"
                highlight-current
                :props="defaultProps"
                :defaultCheckedKeys="defaultChekcedMenu"
                :check-strictly="true"
            ></el-tree>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editAuthorityMenu">确 定</el-button>
                <el-button @click="cancelAuthorityMenu">取 消</el-button>
            </span>
      </el-dialog>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                authorityDialogVisible:false,
                addDialogVisible: false,
                editDialogVisible: false,
                pageNum: 1,
                pageSize: 5,
                name: "",
                roleList: [],
                total: 0,
                addRoleForm: {
                    name: ""
                },
                editRoleForm: {
                    id: -1,
                    name: ""
                },
                authorityForm:{
                  id:'',
                  name:'',
                  checkedIds:[]
                },

                authorityFormRules:{},
                menuList:[],
                defaultProps:{
                  children: 'children',
                  label: 'name'
                },
                editRoleFormRules:{
                    name:[
                      {required:true,message:"名称不能为空",trigger:'blur'}
                    ]
                },
                addRoleFormRules:{
                  name:[
                    {required:true,message:"名称不能为空",trigger:'blur'}
                  ]
                },
                defaultChekcedMenu:[]
            };
        },
        methods: {
            //打开授权对话框
            showAuthorityDialog(row){
              this.authorityDialogVisible = true ;
              this.authorityForm.id = row.id;
              this.authorityForm.name = row.name;

              //查询当前 角色 拥有在权限
              let url = "role/getCheckedPer/"+row.id;
              this.$axios.get(url).then(res=>{
                if (res.data.code == 200){
                  console.log(res.data.data)
                  this.defaultChekcedMenu = res.data.data;
                }else {
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })
            },
            cancelAuthorityMenu(){
              this.authorityDialogVisible = false ;
              this.$refs.roleMenuTree.setCheckedKeys([]);
            },

            editAuthorityMenu(){
              let tree = this.$refs.roleMenuTree ;
              let arrIds = tree.getCheckedKeys();
              this.authorityForm.checkedIds = arrIds ;

              if (arrIds.length < 1){
                this.$message({
                  type:'error',
                  message:'请至少选中一个权限',
                  duration:1000
                })
                return ;
              }

              let url = "role/authorityToRole";
              this.$axios.post(url,this.authorityForm)
                  .then(res=>{
                    if (res.data.code == 200){
                      this.$message({
                        type:'success',
                        message:res.data.msg,
                        duration:1000
                      })
                      this.authorityDialogVisible = false ;
                      this.getRoleList();
                    }else {
                      this.$message({
                        type:"error",
                        message:res.data.msg,
                        duration:1000
                      })
                    }
                  })
            },
            // 删除角色信息
            removeRoleById(id) {
              this.$confirm('确认删除吗，如果有子菜单，则子菜单也会被删除，是否继续', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(()=>{

                let url = 'role/del/'+id;
                this.$axios.delete(url)
                    .then(res=>{
                      if(res.data.code==200){
                        this.$message({
                          type:'success',
                          message:res.data.msg,
                          duration:1000
                        })
                        this.getRoleList();
                      }else {
                        this.$message({
                          type:'error',
                          message:res.data.msg,
                          duration:1000
                        })
                      }
                    })
              })
            },
            //添加角色
            showAddDialog(row) {
                this.addDialogVisible = true;
            },
            //编辑角色
            showEditDialog(row) {
                this.editDialogVisible = true;
                this.editRoleForm.id = row.id;
                this.editRoleForm.name = row.name;
            },
            editRoleFormClose() {
                this.editDialogVisible = false;
                this.$refs.editRoleFormRef.resetFields();
            },
            addRoleFormClose(){
              this.addDialogVisible = false;
              this.$refs.addRoleFormRef.resetFields();
            },
            editRole() {
              let url = 'role/modify';
              this.$axios.put(url,this.editRoleForm)
                  .then(res=>{
                    if(res.data.code==200){
                      this.$message({
                        type:'success',
                        message:res.data.msg,
                        duration:1000
                      })
                      this.$refs.editRoleFormRef.resetFields();
                      this.editDialogVisible = false;
                      this.getRoleList();
                    }else {
                      this.$message({
                        type:'error',
                        message:res.data.msg,
                        duration:1000
                      })
                    }
                  })
            },
            addRole() {
              let url = 'role/add';
              this.$axios.put(url,this.addRoleForm)
                  .then(res=>{
                    if(res.data.code==200){
                      this.$message({
                        type:'success',
                        message:res.data.msg,
                        duration:1000
                      })
                      this.$refs.addRoleFormRef.resetFields();
                      this.addDialogVisible = false;
                      this.getRoleList();
                    }else {
                      this.$message({
                        type:'error',
                        message:res.data.msg,
                        duration:1000
                      })
                    }
                  })
            },

            getRoleList() {
              let url = 'role/list'
              this.$axios.get(url,{
                params:{
                  now: this.pageNum,
                  size: this.pageSize,
                  name: this.name
                }
              }).then(res=>{
                if(res.data.code == 200){
                  console.log(res)
                  this.roleList = res.data.data.list;
                  this.pageNum = res.data.data.pageNum;
                  this.pageSize = res.data.data.pageSize;
                  this.total = res.data.data.total;
                }else {
                  this.$message({
                    type:'error',
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })
            },
            searchRole() {
                this.pageNum = 1;
                this.pageSize = 5;
                this.getRoleList();
            },
            handleSizeChange(newSize) {
                this.pageSize = newSize;
                this.getRoleList();
            },
            handleCurrentChange(newPage) {
                this.pageNum = newPage;
                this.getRoleList();
            },
            loadMenus() {
              let url = "menu/showMenus";
              this.$axios.get(url)
                  .then(res=>{
                    if (res.data.code == 200){
                      this.menuList = res.data.data;
                    }else {
                      this.$message({
                        type:'error',
                        message:res.data.msg,
                        duration:1000
                      })
                    }

                  })
            }


        },
        created() {
            this.searchRole();
            this.loadMenus();
        }
    };
</script>
<style lang="less" scoped>
</style>